<template>
    <div>
      <h2>交易查询</h2>
      <form @submit.prevent="queryTransaction">
        <div>
          <label>交易ID:</label>
          <input v-model="txId" placeholder="请输入交易ID" required />
        </div>
        <button type="submit">查询交易</button>
      </form>
      <div v-if="result">
        <h3>交易详情</h3>
        <p><strong>发送者:</strong> {{ result.sender }}</p>
        <p><strong>接收者:</strong> {{ result.receiver }}</p>
        <p><strong>金额:</strong> {{ result.amount }}</p>
        <p><strong>状态:</strong> {{ result.status }}</p>
      </div>
    </div>
</template>
  
<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  name: 'QueryTransaction',
  setup() {
    const txId = ref('')
    const result = ref(null)

    const queryTransaction = async () => {
      try {
        // 根据交易ID查询交易详情
        // console.log('Querying transaction with ID:', txId.value) // 添加调试信息
        const response = await axios.get(`/api/transaction/${txId.value}`)
        // console.log('Response data:', response.data) 
        result.value = response.data
        // console.log('Result after assignment:', result.value)
      } catch (error) {
        console.error('Error querying transaction:', error) // 添加调试信息
        alert('查询交易失败')
      }
    }

    return { txId, queryTransaction, result }
  }
}
</script>